import React, { PureComponent } from "react"
import ReactEcharts from "echarts-for-react"
import echarts from "echarts"
import { toJS } from "mobx"

class RectifierModule extends PureComponent {
  getOption = (energyConservationData) => {
    const energySum =
      energyConservationData.airConditionerValue +
      energyConservationData.electricityValue
    const airConditionerValue = (
      (energyConservationData.airConditionerValue / energySum) *
      100
    ).toFixed(1)
    return {
      color: ["#3398DB", "#2bb2ff"],
      grid: {
        show: false,
        left: 0,
        right: 0,
        bottom: "0%",
        top: "0%",
        containLabel: false,
      },
      xAxis: {
        show: false,
        type: "category",
      },
      tooltip: {
        trigger: "item",
        backgroundColor: "#02db72",
        formatter: (params) => {
          const value =
            params["seriesIndex"] === 0
              ? energyConservationData.airConditionerValue
              : energyConservationData.electricityValue
          return `能耗分析<br /> ${params.name}: ${value}kw`
        },
      },
      yAxis: {
        type: "value",
        show: false,
      },
      series: [
        {
          name: "能耗分析",
          type: "bar",
          stack: "总量",
          barWidth: 80,
          data: [
            {
              name: "新风系统节能",
              value: energyConservationData.airConditionerValue,
              label: { fontSize: 14 },
            },
          ],
          label: {
            show: true,
            formatter: (params) => {
              return `${airConditionerValue}%`
            },
          },
          itemStyle: {
            color: "#02dbb5",
            barBorderRadius: [0, 0, 4, 4],
          },
        },
        {
          name: "能耗分析",
          type: "bar",
          stack: "总量",
          barWidth: 80,
          data: [
            {
              name: "下电管理节能",
              value: energySum,
              label: { fontSize: 14 },
            },
          ],
          label: {
            show: true,
            formatter: (params) => {
              return `${100 - airConditionerValue}%`
            },
          },
          itemStyle: {
            color: "#2bb2ff",
            barBorderRadius: [4, 4, 0, 0],
          },
        },
      ],
    }
  }

  render() {
    const { energyConservationData } = this.props
    return (
      <ReactEcharts
        option={this.getOption(energyConservationData)}
        style={{ height: "100%" }}
      />
    )
  }
}

export default RectifierModule
